<script setup lang="ts">
import { computed } from 'vue'
import { Card, Empty } from 'ant-design-vue'
import { useUserStore } from '@/stores/user'
import AdminDashboard from './components/AdminDashboard.vue'
import TeacherDashboard from './components/TeacherDashboard.vue'
import StudentDashboard from './components/StudentDashboard.vue'

const userStore = useUserStore()
const userType = computed(() => userStore.userInfo?.userType)
</script>

<template>
  <div class="dashboard">
    <!-- 欢迎信息 -->
    <Card class="welcome-card mb-4">
      <h2>欢迎回来，{{ userStore.userInfo?.realName }}</h2>
      <p>{{ new Date().toLocaleDateString() }}</p>
    </Card>

    <!-- 角色相关的仪表盘 -->
    <AdminDashboard v-if="userType === 1" />
    <TeacherDashboard v-else-if="userType === 2" />
    <StudentDashboard v-else-if="userType === 3" />
    <div v-else>
      <Empty description="暂未实现其他角色的统计功能" />
    </div>
  </div>
  <!-- Coze 聊天组件 -->
  <CozeChat botId="7474645794478473227" token="pat_YE1BkOBiqKeM0LGX720o9kThG5Z5lSl1ZXfVdGonOgfxVMc0uXMU77NzYGLPz74n" />
</template>

<style lang="less" scoped>
.dashboard {
  .welcome-card {
    background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
    
    :deep(.ant-card-body) {
      color: white;
      
      h2 {
        color: white;
        margin-bottom: 8px;
      }
      
      p {
        margin: 0;
        opacity: 0.8;
      }
    }
  }

  .mb-4 {
    margin-bottom: 16px;
  }
}
</style> 